<script setup lang="ts">
import {ref} from 'vue'
import {StnIpt, IptTypeConst} from 'st-ui-vue3-navie'
import {ResponsiveCollapseSearch} from '@components'
import {useSysRoleStore} from '../stores/sys-role-store'

// 搜索表单
const searchForm = ref({
  name: '',
  code: '',
  status: null,
})

// 状态选项
const statusOptions = [
  {
    label: '启用',
    value: 1,
  },
  {
    label: '禁用',
    value: 0,
  },
]

/**
 * 搜索处理函数
 */
const searchHandler = async (searchFormData: Record<string, any>) => {
  return await useSysRoleStore().getRoleDataByReq(searchFormData)
}
</script>

<template>
  <ResponsiveCollapseSearch
    :search-form-default="searchForm"
    :search-handler="searchHandler"
  >
    <StnIpt
      label="角色名称"
      v-model:value="searchForm.name"
      :type="IptTypeConst.TEXT"
      placeholder="请输入角色名称"
    />
    <StnIpt
      label="角色编码"
      v-model:value="searchForm.code"
      :type="IptTypeConst.TEXT"
      placeholder="请输入角色编码"
    />
    <StnIpt
      label="状态"
      v-model:value="searchForm.status"
      :type="IptTypeConst.SELECT"
      :options="statusOptions"
      placeholder="请选择状态"
      clearable
    />
  </ResponsiveCollapseSearch>
</template> 